<template>
  <div>
    <el-form ref="teacherSignInForm" :model="form" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="卡号：" prop="cardCode">
        <el-input v-model="form.cardCode" placeholder="请输入卡号" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="初始密码：" prop="codepwd">
        <el-input v-model="form.codepwd" placeholder="请输入会员卡密码" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="姓名：" prop="nickName">
        <el-input v-model="form.nickName" placeholder="请输入姓名" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="新设密码：" prop="password">
        <el-input v-model="form.password" placeholder="请设置登录密码" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="再次输入：" prop="checkPassword">
        <el-input v-model="form.checkPassword" placeholder="请确认登录密码" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 244px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="验证码：" prop="code">
        <el-input v-model="form.code" placeholder="请输入验证码" style="width: 244px;" clearable></el-input>
        <el-button v-show="!countDown" style="color: var(--primaryColor); border: none;" @click="getSMSCodeByPhone">
          获取验证码
        </el-button>
        <el-button v-show="countDown" style="color: var(--primaryColor); border: none;">
          {{ countDown }}s
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :submitLoading="submitLoading" @click="onClickConfirm()" class="modify-button">
          注册
        </el-button>
        <el-button type="primary" @click="gologin()" class="modify-button">
          去登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { request } from "@/util/request.js"

export default {
  inheritAttrs: false,
  components: {},
  props: {},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.form.checkPassword !== '') {
          this.$refs['teacherSignInForm'].validateField('checkPassword');
        }
        callback();
      }
    };
    var validateCheckPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      countDown: '',
      form: {
        cardCode: undefined,
        codepwd: undefined,
        nickName: undefined,
        password: '',
        checkPassword: undefined,
        phone: undefined,
        code: undefined,
      },
      submitLoading: false,
      rules: {
        cardCode: [
          { required: true, message: '请输入卡号', trigger: 'change' },
        ],
        codepwd: [
          { required: true, message: '请输入会员卡密码', trigger: 'change' },
        ],
        nickName: [
          { required: true, message: '请输入姓名', trigger: 'change' },
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'change', },
        ],
        checkPassword: [
          // { required: true, message: '请再次输入密码', trigger: 'change' },
          { required: true, validator: validateCheckPassword, trigger: 'change' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'change' },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    gologin() {
      this.$parent.showRegisters = false
    },

    getSMSCodeByPhone(){
      this.$refs['teacherSignInForm'].validateField('phone', (errorMessage) => {
        if (errorMessage) {
          return this.$message.error(errorMessage);
        }
        const TIME_COUNT = 60
        request({
          method: 'POST',
          url: 'sysUser/zyan',
          params: {
            phone: this.form.phone
          }
        }).then(res => {
          if (![null, 0].includes(res.code)) {
            return this.$message.error(res.msg);
          }
          if (!this.timer) {
            this.countDown = TIME_COUNT;
            this.timer = setInterval(() => {
              if (this.countDown > 0 && this.countDown <= TIME_COUNT) {
                this.countDown--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
          this.$message.success(res.msg);
        })
      })
    },

    onClickConfirm() {
      this.$refs['teacherSignInForm'].validate(valid => {
        if (!valid) return
        this.submitLoading = true
        request({
          method: 'POST',
          url: 'sysUser/registers',
          data: {
            ...this.form,
            checkPassword: undefined,
          },
          params: {
            code: this.form.code,
            codepwd: this.form.codepwd
          }
        }).then(res => {
          console.log(res);
          if (![0, 200].includes(res.code)) {
            return this.$message.error(res.msg)
          }
          this.$message.success('注册成功')
          this.isVisible = false
          return res
        }).finally(() => {
          this.submitLoading = false
        })
      })
    },

  }
}

</script>
<style lang="stylus" scoped>
.modify-button 
  width: 120px
</style>
